<template>
  <div class="hd-header disabled-click" @click.stop.prevent="onClick">
    <div class="hd-logo">
      <img src="@/assets/logo.png" />
    </div>
    <div class="hd-steps">
      <a-steps progress-dot :current="currentIndex" labelPlacement="vertical">
        <a-step>
          <span class="step-title" slot="title">刷二维码 </span>
        </a-step>
        <a-step>
          <span class="step-title" slot="title">选择运单 </span>
        </a-step>
        <a-step>
          <span class="step-title" slot="title">打印运单 </span>
        </a-step>
      </a-steps>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    currentIndex() {
      if (this.$route.name == "PrintInfo") {
        return 2;
      }
      if (this.$route.name == "ScanInfo") {
        return 1;
      }
      if (this.$route.name == "Welcome") {
        return 0;
      }
    },
  },
  methods: {
    onClick() {
      this.$parent.$parent.$parent.$children[1].$children[0].$children[0].$children[0].$refs.inputRef[0].$el.focus();
    },
    goBack() {
      if (window.history.length <= 1) {
        this.$router.push({ path: "/welcome" });
        return false;
      } else {
        this.$router.go(-1);
      }
      //上面都没执行就说明卡在当前页不是最后一条， histroy记录数量大于1，又没有回退记录，只能返回首页，
      //如果上面都执行了 页面都跳走了，这个也就不用管了
      //   setTimeout(() => {
      //     this.$router.push({ path: "/welcome" });
      //   }, 500);
    },
  },
};
</script>

<style lang="less" scoped>
.hd-header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 2rem 1rem;
  .hd-logo img {
    width: 9rem;
    position: relative;
    top: -2rem;
  }
  .hd-button {
    width: 8rem;
    text-align: center;
    border-radius: 0.5rem;
    border: 0.25rem #fff solid;
    color: #fff;
    font-size: 2rem;
  }
  .hd-steps {
    display: inline-flex;
    width: 60vw;
    padding: 1rem;

    .step-icon {
      background-color: white;
    }
    .ant-steps-item-active {
      .step-title {
        font-size: 2rem;
        color: #fff;
      }
    }
    .step-title {
      font-size: 1.5rem;
      color: #fff;
    }
  }
}
</style>